<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		#content{
			width: 380px;
			height: 230px;
			border: 10px solid #ccc;
			margin: 40px auto;
			position: relative;
			background: #F1F1F1;
		}
		#content a {
			width: 40px;
			height: 40px;
			background: #000;
			border: 5px solid #fff;
			position: absolute;
			top: 80px;
			text-align: center;
			text-decoration: none;
			line-height: 40px;
			color: #fff;
			font-size: 30px;
			font-weight: bold;
			opacity: 0.6;
			
		}
		#content a:hover{
			opacity: 0.9;
		}
		#prev{
			left: 10px;
		}
		#next{
			right: 10px;
		}
		#text{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 380px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			color: #fff;
			background: #000;
			opacity: 0.8;
			margin: 0;
			padding: 0;
		}
		#span1{
			position: absolute;
			top: 0;
			left: 0;
			width: 380px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			color: #fff;
			background: #000;
			opacity: 0.8;
			margin: 0;
			padding: 0;
		}
		#img1{
			width: 380px;
			height: 230px;
		}
	</style>
</head>
<body>
		
	<div id="content">
		<a id="prev" href="javascript:;">&lt;</a>
		<a id="next" href="javascript:;">&gt;</a>
		<p id="text">图片文字加载中...</p>
		<span id="span1">数量正在计算中...</span>
		<img id="img1" >
	</div>
	<script type="text/javascript">
		window.onload = function (){
			var oPrev = document.getElementById('prev');
			var oNext = document.getElementById('next');
			var oText = document.getElementById('text');
			var oSpan = document.getElementById('span1');
			var oImg = document.getElementById('img1');
			
			var arrUrl = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg'];
			var arrText = ['一','二','三','四'];
			
			var num = 0;
			function fnTab(){
				oSpan.innerHTML = num + 1 + '/' + arrText.length;
				oImg.src = arrUrl[num];
				oText.innerHTML = arrText[num];
			}
			fnTab();
			
			oPrev.onclick = function (){
				num --;
				if( num == -1){
					num = arrText.length - 1;
				}
				fnTab();
			}
			
			oNext.onclick = function (){
				num ++;
				if( num == arrText.length){
					num = 0;
				}
				fnTab();
			}
			
		}
	</script>
</body>
</html>